import { defineView } from "@/routers/tools.mjs";

class FilterCaseCtrl {
  /**
   * @param {ng.WIScope} $scope
   */
  constructor($scope) {
    this.$scope = $scope;
    this.$scope.friends = [
      { name: "John", phone: "555-1276" },
      { name: "Mary", phone: "800-BIG-MARY" },
      { name: "Mike", phone: "555-4321" },
      { name: "Adam", phone: "555-5678" },
      { name: "Julie", phone: "555-8765" },
      { name: "Juliette", phone: "555-5678" },
    ];
  }
}

/**
 * @type {DefineView}
 */
const filterCaseView = defineView({
  controller: FilterCaseCtrl,
  template: /* HTML */ html`
    <!-- <div ng-init=""></div> -->
    <label
      >Search:
      <input
        type="text"
        ng-model="searchText"
        uib-popover="popover!"
        popover-trigger="'focus'"
        class="form-control"
      />
    </label>
    <table id="searchTextResults">
      <tr>
        <th>Name</th>
        <th>Phone</th>
      </tr>
      <tr ng-repeat="friend in friends | filter:searchText">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
      </tr>
    </table>
    <hr />
    <label
      >Any:
      <input
        type="text"
        ng-model="search.$"
        uib-popover="popover!"
        popover-trigger="'focus'"
        class="form-control"
    /></label>
    <br />
    <label
      >Name only <input ng-model="search.name" class="form-control" /></label
    ><br />
    <label
      >Phone only <input ng-model="search.phone" class="form-control" /></label
    ><br />
    <label
      >Equality
      <input class="form-control" type="checkbox" ng-model="strict" /></label
    ><br />
    <table id="searchObjResults">
      <tr>
        <th>Name</th>
        <th>Phone</th>
      </tr>
      <tr ng-repeat="friendObj in friends | filter:search:strict">
        <td>{{ friendObj.name }}</td>
        <td>{{ friendObj.phone }}</td>
      </tr>
    </table>
  `,
});

export default filterCaseView;
